<template>
  <div class="container_warp">
    <div id="containerChart" style="margin: 100px 0 0 50px;"></div>
    <RightDrawer class="right_drawer" :drawerType="type" :selectCell="selectCell" :graph="graph" :grid="grid"
      @deleteNode="deleteNode"></RightDrawer>
    <div class="operating">
      <div class="btn-group">
        <!-- <div class="btn" title="数据库" @mousedown="startDrag('database', $event)">
          <i class="iconfont icon-circle"></i>
        </div>
        <div class="btn" title="服务器" @mousedown="startDrag('server', $event)">
          <i class="iconfont icon-square"></i>
        </div> -->
        <div v-for="item in sourceList" :key="item.id" class="btn" :title="item.name" @mousedown="startDrag('server', $event,item)">
         <img src="../assets/icon.png" alt="">
        </div>

        <!-- <div class="btn" title="条件节点">
          <i class="iconfont icon-square rotate-square" @mousedown="startDrag('polygon', $event)"></i>
        </div> -->
        <div class="btn-group_tips" v-if="showTips">
          拖拽生成<br />资产拓扑图形
        </div>
      </div>
      <div class="btn-group">
        <Tooltip content="直线箭头" placement="bottom">
          <div :class="['btn', currentArrow === 1 ? 'currentArrow' : '']" @click="changeEdgeType('normal')">
            <i class="iconfont icon-ai28"></i>
          </div>
        </Tooltip>
        <Tooltip content="曲线箭头" placement="bottom">
          <div :class="['btn', currentArrow === 2 ? 'currentArrow' : '']" @click="changeEdgeType('smooth')">
            <i class="iconfont icon-Down-Right"></i>
          </div>
        </Tooltip>
        <Tooltip content="直角箭头" placement="bottom">
          <div :class="['btn', currentArrow === 3 ? 'currentArrow' : '']" @click="changeEdgeType()">
            <i class="iconfont icon-jiantou"></i>
          </div>
        </Tooltip>
      </div>
      <!-- <div class="btn-group">
          <div class="btn" @click="changeMode('edit')" title="选择模式">
            <i class="iconfont icon-mousepointershubiao"></i>
          </div>
          <div class="btn" @click="changeMode('drag')" title="拖拽模式">
            <i class="iconfont icon-tuozhuai"></i>
          </div>
        </div> -->
      <div class="btn-group">
        <Tooltip content="删除" placement="bottom">
          <div class="btn" @click="deleteNode()" style="margin-top: 5px;">
            <i class="iconfont icon-shanchu"></i>
          </div>
        </Tooltip>
        <Tooltip content="保存PNG" placement="bottom">
          <div class="btn" @click="saveToPNG()" title="保存">
            <i class="iconfont icon-baocun"></i>
          </div>
        </Tooltip>
      </div>
    </div>
  </div>
</template>
<script>
import '@antv/x6-vue-shape'
import { Graph, Shape, Addon, FunctionExt, DataUri } from '@antv/x6';
import RightDrawer from './components/RightDrawer';
import insertCss from 'insert-css';
import { startDragToGraph } from './Graph/methods.js'
const data = {};
export default {
  data() {
    return {
      graph: '',
      value1: true,
      type: 'grid',
      selectCell: '',
      connectEdgeType: {  //连线方式
        connector: 'normal',
        router: {
          name: ''
        }
      },
      showTips: false,
      currentArrow: 1,
      grid: { // 网格设置
        size: 20,      // 网格大小 10px
        visible: true, // 渲染网格背景
        type: 'mesh',
        args: {
          color: '#D0D0D0',
          thickness: 1,     // 网格线宽度/网格点大小
          factor: 10,
        },
      },
      // 资源列表
      sourceList:[
        {
          id: '1',
          name: '应用服务器',
          ip:'192.168.123.78',
          status: 'abnormal',
          abnormalCount:1,
          icon: require('@/assets/icon.png')
        },
        {
          id: '2',
          name: '数据库',
          ip:'192.168.1.133',
          status: 'normal',
          icon: require('@/assets/icon.png')
        },
      ]
    }
  },
  components: {
    RightDrawer
  },
  methods: {
    initX6() {
      var _that = this
      this.graph = new Graph({
        container: document.getElementById('containerChart'),
        background: {
          color: '#f0f0f0',
          image: require('../assets/ces2.png')
        },
        width: '737',
        height: '349',
        grid: _that.grid,
        resizing: { //调整节点宽高
          enabled: true,
          orthogonal: false,
        },
        selecting: true, //可选
        snapline: true,
        interacting: {
          edgeLabelMovable: true
        },
        connecting: { // 节点连接
          anchor: 'center',
          connectionPoint: 'anchor',
          allowBlank: false,
          snap: true,
          createEdge() {
            return new Shape.Edge({
              attrs: {
                line: {
                  stroke: '#1890ff',
                  strokeWidth: 1,
                  targetMarker: {
                    name: 'classic',
                    size: 8
                  },
                  strokeDasharray: 0, //虚线
                  style: {
                    animation: 'ant-line 30s infinite linear',
                  },
                },
              },
              label: {
                text: ''
              },
              connector: _that.connectEdgeType.connector,
              router: {
                name: _that.connectEdgeType.router.name || ''
              },
              zIndex: 0
            })
          },
        },
        highlighting: {
          magnetAvailable: {
            name: 'stroke',
            args: {
              padding: 4,
              attrs: {
                strokeWidth: 4,
                stroke: '#6a6c8a'
              }
            }
          }
        },
      });
      insertCss(`
              @keyframes ant-line {
                to {
                    stroke-dashoffset: -1000
                }
              }
            `)
      // 监听节点放下事件，检测边界，新放置节点和移动原有节点需要分别监听 node:added 和 node:mouseup
      this.graph.on('node:mouseup', ({ e, x, y, cell, view }) => {
        console.log('=========')
        console.log(x)
        if (x < 30) {
          cell.setPosition(30, y)
        }
        if (x > 600) {
          cell.setPosition(600, y)
        }
        if (x > 120 && x<=180) {
          cell.setPosition(80, y)
        }
        if (x > 180 && x<=240) {
          cell.setPosition(240, y)
        }
        if (x > 520 && x<=560) {
          cell.setPosition(420, y)
        }
        if (x > 560 && x<=600) {
          cell.setPosition(600, y)
        }
        if (y < 30) {
          cell.setPosition(x, 30)
        }
        if (y > 300) {
          cell.setPosition(x, 280)
        }
        console.log(y)
        console.log(e)
        console.log('=========')
      })
      this.graph.on('node:added', ({ cell, index, options }) => {
        console.log('++++++++++')
        console.log(cell.getPosition())
        let {x ,y} = cell.getPosition()
        if (x < 30) {
          cell.setPosition(30, y)
        }
        if (x > 600) {
          cell.setPosition(600, y)
        }
        if (x > 120 && x<=180) {
          cell.setPosition(80, y)
        }
        if (x > 180 && x<=240) {
          cell.setPosition(240, y)
        }
        if (x > 520 && x<=560) {
          cell.setPosition(420, y)
        }
        if (x > 560 && x<=600) {
          cell.setPosition(600, y)
        }
        if (y < 30) {
          cell.setPosition(x, 30)
        }
        if (y > 300) {
          cell.setPosition(x, 280)
        }
        console.log(index)
        console.log(options)
        console.log('++++++++++')
      })
      // 右键菜单
      this.graph.on('node:contextmenu', ({ e, x, y, cell, view }) => {
        this.onContextmenu(e)
      })
      this.graph.on('edge:contextmenu', ({ e, x, y, cell, view }) => {
        this.onContextmenu(e)
      })
      this.graph.on('blank:contextmenu', ({ e, x, y, cell, view }) => {
        this.onContextmenu(e)
      })
      this.graph.fromJSON(data)
      this.graph.history.redo()
      this.graph.history.undo()
      // 鼠标移入移出节点
      this.graph.on('node:mouseenter', FunctionExt.debounce(() => {
        const container = document.getElementById('containerChart')
        const ports = container.querySelectorAll(
          '.x6-port-body'
        )
        this.showPorts(ports, true)
      }),
        500
      )
      this.graph.on('node:mouseleave', () => {
        const container = document.getElementById('containerChart')
        const ports = container.querySelectorAll(
          '.x6-port-body'
        )
        this.showPorts(ports, false)
      })
      this.graph.on('blank:click', () => {
        this.type = 'grid'
      })
      this.graph.on('cell:click', ({ cell }) => {
        this.type = cell.isNode() ? 'node' : 'edge'
      })
      this.graph.on('selection:changed', (args) => {
        args.added.forEach(cell => {
          this.selectCell = cell
          if (cell.isEdge()) {
            cell.isEdge() && cell.attr('line/strokeDasharray', 5) //虚线蚂蚁线
            cell.addTools([
              {
                name: 'vertices',
                args: {
                  padding: 4,
                  attrs: {
                    strokeWidth: 0.1,
                    stroke: '#2d8cf0',
                    fill: '#ffffff',
                  }
                },
              },
            ])
          }
        })
        args.removed.forEach(cell => {
          cell.isEdge() && cell.attr('line/strokeDasharray', 0)  //正常线
          cell.removeTools()
        })
      })
    },
    // 右击菜单事件
    onContextmenu(event) {
      const cells = this.graph.getSelectedCells()
      const isRedo = this.canRedo
      const isUndo = this.canUndo
      this.$contextmenu({
        items: [
          {
            label: "查看详情",
            disabled: cells.length === 0 ? true : false,
            onClick: () => {
              if (cells.length) {
               alert('查看详情')
              }
            }
          },
          {
            label: "删除节点",
            disabled: cells.length === 0 ? true : false,
            onClick: () => {
              if (cells.length) {
                this.graph.removeCells(cells)
              }
            }
          }
        ],
        event, // 鼠标事件信息
        customClass: "custom-class", // 自定义菜单 class
        zIndex: 100, // 菜单样式 z-index
        minWidth: 150 // 主菜单最小宽度
      });
      return false;
    },
    showPorts(ports, show) {
      for (let i = 0, len = ports.length; i < len; i = i + 1) {
        ports[i].style.visibility = show ? 'visible' : 'hidden'
      }
    },
    // 拖拽生成正方形或者圆形
    startDrag(type, e,item) {
      console.log(22222,item)
      startDragToGraph(this.graph, type, e,item)
    },
    // 删除节点
    deleteNode() {
      const cell = this.graph.getSelectedCells()
      this.graph.removeCells(cell)
      this.type = 'grid'
    },
    // 保存png
    saveToPNG() {
      this.$nextTick(() => {
        this.graph.toPNG((dataUri) => {
          // 下载
          DataUri.downloadDataUri(dataUri, '资产拓扑图.png')
        }, {
          backgroundColor: 'white',
          padding: {
            top: 50,
            right: 50,
            bottom: 50,
            left: 50
          },
          quality: 1,
          copyStyles: false
        })
      })

    },
    // 改变边形状
    changeEdgeType(e) {
      if (e === 'normal') {
        this.connectEdgeType = {
          connector: 'normal',
          router: { name: '' }
        }
        this.currentArrow = 1
      } else if (e === 'smooth') {
        this.connectEdgeType = {
          connector: 'smooth',
          router: { name: '' }
        }
        this.currentArrow = 2
      } else {
        this.connectEdgeType = {
          connector: 'normal',
          router: { name: 'manhattan' }
        }
        this.currentArrow = 3
      }
    }
  },
  mounted() {
    this.initX6()
    setTimeout(() => {
      this.showTips = true
    }, 1000)
    setTimeout(() => {
      this.showTips = false
    }, 5000)
  }
};
</script>
<style lang="less">
@import '../assets/iconfont.css';
@import './index.less';
</style>
